<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Application Back-end</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/lazyload.min.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        <link rel="stylesheet" href="css/custom.css" />
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="">Application Back-end</a>
                    <div class="nav-collapse collapse">
                        
                        {$menu}
                        
                        <a href="admin/logout.html" id="logout" class="btn btn-danger" style="float: right;">Logout</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" style="margin-top: 60px;">
            <div class="row-fluid">
                <div class="span12">
                    <div class="page-header">
                        <h1>
                            Application Back-end
                        </h1>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function() {
                        $('#control-login').submit(function(e) {
                            e.preventDefault();
                            $(this).ajaxSubmit({
                                dataType     : 'json',
                                beforeSubmit : beforeRequest,
                                success      : afterRequest
                            });
                        });
                    });
                    
                    function beforeRequest() {
                    
                    }
                    
                    function afterRequest(resp) {
                        console.log(resp);
                    }
                </script>
            </div>
        
            <div class="row-fluid">
                    <table class="table table-striped">
                        <thead>
                            <th width="30">ID</th>
                            <th>Question Image</th>
                            <th>Ans. 1</th>
                            <th>Ans. 2</th>
                            <th>Ans. 3</th>
                            <th>Ans. 4</th>
                            <th></th>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="vertical-align: middle;">1</td>
                                <td>
                                    <img src="img/ajax-loader.gif" data-original="{$site_url}assets/images/questions/1/quiz.jpg" style="height: 77px;" />
                                </td>
                                <td>
                                    <img src="img/ajax-loader.gif" data-original="{$site_url}assets/images/questions/1/1.jpg" />
                                </td>
                                <td>
                                    <img src="img/ajax-loader.gif" data-original="{$site_url}assets/images/questions/1/2.jpg" />
                                </td>
                                <td>
                                    <img src="img/ajax-loader.gif" data-original="{$site_url}assets/images/questions/1/3.jpg" />
                                </td>
                                <td>
                                    <img src="img/ajax-loader.gif" data-original="{$site_url}assets/images/questions/1/4.jpg" />
                                </td>
                                <td style="vertical-align: middle;">
                                    <i class="icon icon-edit"></i>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                <script type="text/javascript">
                $(function() {
                  $('table img').lazyload();
                })
                </script>
            </div>
            
        </div>
        
        <!-- bootstrap modal markup -->
        <div class="modal hide fade" id="modal-update">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3></h3>
            </div>
            <div class="modal-body">
                <p></p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function() {
            
            });
            
            function setModal(title, content) {
                $('#modal-update div.modal-header h3').text(title);
                $('#modal-update div.modal-body').html(content);
                $('#modal-update').modal();
            }
        </script>
    </body>
</html>